<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
<!-- 搜索 -->
<div class="demoTable">
    搜索名字：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload"
               autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="layuiadmin/layui/layui.js"></script>

<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            //  ,url:'/test/table/demo1.json'
            ,
            url: 'listRecord' //模拟接口
            ,
            toolbar: '#toolbarDemo',
            title: '用户数据表',
            cols: [[{
                type: 'checkbox',
                fixed: 'left'
            }/*, {
                field: 'adminRecord.rid',
                width: 100,
                title: '订单ID',
                sort: true
            }*/,
                {
                    field: 'adminRecord',
                    title: '订单编号',
                    sort: true,
                    width: 100,
                    templet: function (d) {
                        return d.adminRecord.rid;
                    }
                }
                , {
                    field: 'adminRecord',
                    title: '用户名',
                    width: 100,
                    templet: function (d) {
                        return d.adminRecord.username;
                    }
                }
                , {
                    field: 'adminRecord',
                    title: '影厅',
                    width: 100,
                    templet: function (d) {
                        return d.adminRecord.cname;
                    }
                }
                , {
                    field: 'adminRecord',
                    title: '下单时间',
                    width: 200,
                    templet: "<div>{{layui.util.toDateString(d.adminRecord.buytime, 'yyyy-MM-dd HH:mm')}}</div>"
                }
                , {
                    field: 'adminRecord',
                    title: '支付金额',
                    width: 100,
                    templet: function (d) {
                        return d.adminRecord.payprice;
                    }
                }
                , {
                    field: 'seats',
                    width: 180,
                    title: '座位号',
                    sort: true,

                }, {
                    field: 'remark',
                    title: '支付状态',
                    sort: true,
                    width: 180
                }]],
            page: true,
            id: 'testReload'
        });
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                 console.log(demoReload.val());
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {
                        username: demoReload.val()
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>